<template>
  <div>
    <div style="width: 375px">
      <van-nav-bar
        style="width: 375px"
        title="商品详情页"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />

      <div>
        <!--顶部轮播图-->
        <van-swipe
          :autoplay="3000"
          height="400"
          @change="huadong"
        >
          <van-swipe-item v-for="(image, index) in goodDetail.goods_images" :key="index">
            <van-image
              height="400"
              :src="image.preview_url"
              lazy-load
            />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ index + 1 }}/ {{ total }}</div>
          </template>
        </van-swipe>
        <!--商品详情-->
        <div class="top">
          <div class="jiage">
            <span>￥{{ goodDetail.goods_price_min }}</span>
            <span>￥{{ goodDetail.goods_price_max }}</span>
          </div>
          <span class="yishou">已售{{ goodDetail.goods_sales }}件</span>
        </div>
        <div class="title text-ellipsis-2">{{ goodDetail.goods_name }}</div>
        <div class="service" @click="showPopup">
          <div class="left-words">
            <span><van-icon name="passed" color="#c00"/>七天无理由退货</span>
            <span><van-icon name="passed" color="#c00"/>48小时发货</span>
          </div>
          <div class="right-icon">
            <van-icon name="arrow"/>
          </div>
        </div>
        <van-popup position="bottom" style="height: 30%" v-model="show">
          <div>
            <span><van-icon name="passed"/>七天无理由退货</span>
            <span><van-icon name="passed"/>48小时发货</span>
          </div>
        </van-popup>

        <!--评论区-->
        <div class="comment">
          <div class="comment-info">
            <div>商品评论（1条）</div>
            <div>
              <span style="color: #a4a4a4">查看更多</span>
              <van-icon name="arrow"></van-icon>
            </div>
          </div>
          <div class="comment-detail" v-for="(item,index) in commentList" :key="index">
            <div class="name">
              <van-image width="20px" height="20px" :src="item.user.avatar_url || defaultImg"></van-image>
              <span>{{ item.user.nick_name }}</span>
              <van-rate
                :value="item.score / 2"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="detail">{{ item.content }}</div>
            <div class="date">{{ item.create_time }}</div>
          </div>
        </div>

        <div class="content" style="width: 375px">
          <div style="text-align: left; margin: 10px; font-size: 16px">商品描述</div>
          <div v-html="content" style="width: 375px"></div>
        </div>
      </div>
    </div>
    <!--底部购物车-->
    <van-goods-action style="width: 375px">
      <van-goods-action-icon icon="home-o" text="首页" @click="$router.push('/home')"/>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="toBuy"
      />
    </van-goods-action>
    <van-action-sheet style="height: 50%" v-model="cartShow" :title=" mode === 'cart' ? '加入购物车' : ''">
      <div class="content" style="position: relative;height: 100%">
        <div style="display: flex">
          <van-image style="margin: 20px" width="180" height="180" :src="goodDetail.goods_image"></van-image>
          <div>
            <div style="color: #c00">￥{{ goodDetail.goods_price_min }}</div>
            <div>库存55</div>
          </div>
        </div>
        <button @click="buyOrCart" class="buyOrCart" :style="mode ==='cart'?cartStyle:buyStyle">
          {{ mode === 'cart' ? '加入购物车' : '立即购买' }}
        </button>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { getComment, getGoodDetail } from '@/api/good'

export default {
  name: 'prodetail-index',
  data () {
    return {
      show: false,
      cartShow: false,
      mode: 'cart',
      cartStyle: 'background-color: #FFB800;',
      buyStyle: 'background-color: #FE5530;',
      index: 0,
      goodId: 0,
      goodDetail: {},
      defaultImg: 'http://cba.itlike.com/public/uploads/10001/20230321/a0db9adb2e666a65bc8dd133fbed7834.png',
      content: '',
      commentList: []
    }
  },
  created () {
    this.goodId = this.$route.params.id
    this.getGoodDetail()
    this.getComment()
  },
  computed: {
    total () {
      return this.goodDetail.goods_images?.length
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    huadong (index) {
      this.index = index
    },
    onClickLeft () {
      this.$router.back()
    },
    async getGoodDetail () {
      const { data: { detail } } = await getGoodDetail(this.goodId)
      this.goodDetail = detail
      this.content = this.goodDetail.content.replace(/414/g, '375')
      console.log(detail)
    },
    async getComment () {
      const { data: { list } } = await getComment(this.goodId)
      this.commentList = list
    },
    addCart () {
      this.mode = 'cart'
      this.cartShow = true
    },
    toBuy () {
      this.mode = 'buyNow'
      this.cartShow = true
    },
    // 购买或者加入购物车
    buyOrCart () {
      if (this.mode === 'cart') {
        console.log(this.mode)
      } else {
        console.log(this.mode)
      }
    }
  }
}
</script>

<style>
.custom-indicator {
  border-radius: 10px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  margin: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.top {
  display: flex;
  justify-content: space-between;
  margin: 5px 20px;

  .yishou {
    color: #938f8f;
    font-size: 13px;
  }

  .jiage {
    & span:first-child {
      color: #c00;
    }

    & span:nth-child(2) {
      color: #d7d2d2;
      text-decoration: line-through;
    }
  }
}

.service {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  margin: 10px;
  font-size: 16px;
  background-color: #fafafa;

  .left-words {
    span {
      margin-right: 10px;
    }

    .van-icon {
      margin-right: 4px;
      color: #fa2209;
    }
  }
}

.comment {
  margin: 5px;

  .comment-info {
    margin: 10px 10px;
    display: flex;
    justify-content: space-between;
  }

  .comment-detail {
    text-align: left;
    margin: 15px 10px;
    border-bottom: 1px solid #cbc9c9;

    .name {
      display: flex;
      justify-content: left;
      align-items: center;
      margin: 5px;
    }

    .detail {
      margin: 10px;
      font-size: 12px;
    }

    .date {
      font-size: 12px;
      margin: 10px;
      color: #adacac;
    }
  }
}

.buyOrCart {
  width: 80%;
  height: 40px;
  margin: 20px 0;
  border: 0;
  color: white;
  border-radius: 20px;
  position: absolute;
  bottom: 10px;
  left: 10%;
  &:active {
  }
}
</style>
